<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="min-h-screen bg-gray-50">
    <div class="max-w-5xl mx-auto py-6 px-4">
      <!-- 顶部导航 -->
      <div class="flex space-x-8 border-b border-gray-200 mb-6">
        <button
            v-for="tab in tabs"
            :key="tab.id"
            :class="[
            'pb-4 px-1 !rounded-button whitespace-nowrap',
            currentTab === tab.id ? 'text-blue-500 border-b-2 border-blue-500 font-medium' : 'text-gray-500'
          ]"
            @click="currentTab = tab.id"
        >
          {{ tab.name }}
        </button>
      </div>

      <!-- 内容列表 -->
      <div class="space-y-4">
        <div v-for="(item, index) in contentList" :key="index"
             class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
          <div class="flex items-start">
            <div class="flex-shrink-0">
              <el-avatar :size="40" :src="item.avatar" />
            </div>
            <div class="ml-3 flex-1">
              <div class="flex items-center justify-between">
                <div class="text-sm">
                  <span class="text-gray-900">你关注的用户</span>
                  <span class="text-blue-500 mx-1">{{ item.username }}</span>
                  <span class="text-gray-500">发布了一篇新帖子</span>
                </div>
                <span class="text-sm text-gray-400">{{ item.time }}</span>
              </div>
              <div class="mt-2">
                <p class="text-gray-600 bg-gray-50 p-3 rounded-lg">{{ item.content }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="mt-6 flex items-center justify-between">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 50]"
            :total="500"
            layout="total, sizes, prev, pager, next"
            class="!rounded-button whitespace-nowrap"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const tabs = [
  { id: 'dynamics', name: '动态' },
  { id: 'following', name: '我的关注' },
  { id: 'followers', name: '关注我的' }
];

const currentTab = ref('dynamics');
const currentPage = ref(1);
const pageSize = ref(10);

const contentList = [
  {
    avatar: 'https://ai-public.mastergo.com/ai/img_res/cca5c4b9e7a31c753ffc466988d95315.jpg',
    username: '跨境数据中心',
    time: '2025-02-28 18:00:39',
    content: '2025全球时尚电商报告：四大市场趋势解读'
  },
  {
    avatar: 'https://ai-public.mastergo.com/ai/img_res/3adf506d54b4f37e7acaff6e0f51213b.jpg',
    username: '跨境数据中心',
    time: '2025-02-28 18:00:32',
    content: '2025年电商趋势：便利性、个性化配售后体验将成消费者决策'
  },
  {
    avatar: 'https://ai-public.mastergo.com/ai/img_res/8e6f7911907d5296591257ff33cb6483.jpg',
    username: '跨境站外推广',
    time: '2025-02-27 00:03:28',
    content: '亚马逊后台又新增1个广告类型！'
  },
  {
    avatar: 'https://ai-public.mastergo.com/ai/img_res/d8aa9cdd1b2fe82aae59cf10c0112bc2.jpg',
    username: '跨境站外推广',
    time: '2025-02-26 00:00:49',
    content: '最简单的方法！一张图就可查询全球的观察利'
  },
  {
    avatar: 'https://ai-public.mastergo.com/ai/img_res/27edbdb07cd1c12a46d5c825455089ee.jpg',
    username: '跨境数据中心',
    time: '2025-02-21 17:57:03',
    content: '2024年亚洲成为全球美容市场重力点，Z世代主导美容消费'
  }
];
</script>

<style scoped>
.el-pagination {
  --el-pagination-button-bg-color: transparent;
}

.el-avatar {
  --el-avatar-bg-color: transparent;
}
</style>

